<template>
 <div class="bg-white dark:bg-gray-900">
        <div class="flex justify-center h-screen">
            <div class="hidden bg-cover lg:block lg:w-2/3" 
            style="background-image: url('../../../public/imgs/login2.jpg')">
                <div class="flex items-center h-full px-20 bg-gray-900 bg-opacity-40">
                    <div>
                        <h2 class="text-4xl font-bold text-white">欢迎注册</h2>
                        
                        <p class="max-w-xl mt-3 text-gray-300">唐玮的一个测试注册组件....</p>
                    </div>
                </div>
            </div>
            
            <div class="flex items-center w-full max-w-md px-6 mx-auto lg:w-2/6">
                <div class="flex-1">
                    <div class="text-center">
                        <h2 class="text-4xl font-bold text-center text-gray-700 dark:text-white">注册</h2>
                        
                        <p class="mt-3 text-gray-500 dark:text-gray-300">请您输入您的网站的注册账户哦~~</p>
                    </div>

                    <div class="mt-8">
                        <form @submit="onSubmit">
                            <div>
                                <label for="email" class="block mb-2 text-sm text-gray-600 dark:text-gray-200">注册账号</label>
                                <!-- <input  type="admin" name="admin" id="admin" placeholder="请输入邮箱或手机号" class=" input" /> -->
                                <FormAdminInput v-model="values.account" placeholder="请输入邮箱或手机号" class=" input"/><br/>
                                <FormError :error="errors.account"/>
                            </div>

                            <div class="mt-6">
                                <div class="flex justify-between mb-2">
                                    <label for="password" class="text-sm text-gray-600 dark:text-gray-200">密码</label>
                                  
                                </div>

                                <!-- <input  type="password" name="password" id="password" placeholder="请输入密码" class="input" /> -->
                                <FormAdminInput v-model="values.password"  placeholder="请输入密码" class="input"/><br/>
                                <FormError :error="errors.password"/>

                            </div>

                            <div class="mt-6">
                                <!-- <button
                                    class="w-full px-4 py-2 tracking-wide text-white transition-colors duration-200 transform bg-blue-500 rounded-md hover:bg-blue-400 focus:outline-none focus:bg-blue-400 focus:ring focus:ring-blue-300 focus:ring-opacity-50">
                                    注册
                                </button> -->
                                <FormBtns class="w-full px-4 py-2 tracking-wide text-white transition-colors duration-200 transform bg-blue-500 rounded-md hover:bg-blue-400 focus:outline-none focus:bg-blue-400 focus:ring focus:ring-blue-300 focus:ring-opacity-50" text="注册" /> 

                            </div>

                        </form>

                         <div class="flex gap-3 justify-center mt-3 ">
                            <a href="#" class="text-blue-500 text-sm  hover:text-violet-400 ">网站首页</a>
                         <a href="#" class="text-blue-500 text-sm  hover:text-violet-400 ">立刻登录~</a>
                    </div> 
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">

import {ref} from "vue";

import v from "@/plugins/validata/index"

import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";


const router =useRouter()


const  {yup,useForm,useFields}=  v


const schema={  //使用yup验证规则
    account:yup.string().required("账号不能为空").min(10,"注册的账号不能少于10位").email("账号必须为邮箱格式").label("注册的账号") 
   ,
    password:yup.string().required("账号不能为空").min(10,"密码不能少于10位").label("密码")
}

let {handleSubmit,errors,values} = useForm({
    validationSchema:schema,
    initialValues:{
       account:"" ,
       password:""
    }
})

//定义为响应式数据
//  useField<string>("account")
//  useField<string>("password")
useFields(Object.keys(schema))
//提交
const onSubmit=handleSubmit(async(value:any)=>{
 
  //满足条件，保存数据库，跳转到登录页面
  ElMessage({
    type: "success",
    message: "注册成功"
  })
  router.push({name:'auth.login'})

})
</script>

<style scoped lang="scss">
  .input{
      @apply   border-2 cursor-pointer border  border-x-gray-700 w-full 
              rounded-md   border-gray-500 outline-none placeholder:text-xs 
                  p-1  px-4   ring-violet-600 focus:ring-2 ring-offset-2
                   duration-500 focus:border-white hover:ring-2 hover:border-white
   }
</style>